<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 显示普通文本, 不会解析html结构 -->
        {{message}}
        <!-- {{msg}} -->
        <h3 v-text="message">哈哈哈哈哈</h3>
        <!-- 输出真正的HTML结构 -->
        <h3 v-html="message">呵呵呵呵</h3>
        <div v-html="msg"><p>呵呵呵呵</p></div>


        <!-- v-pre：会跳过元素或者是子元素的编译过程，通常用来展示原始表前，跳过没有指令的节点会加快编译 -->
        <p>不添加指令v-pre{{message}}</p>
        <!-- 添加指令v-pre -->
        <p v-pre>指令v-pre{{message}}</p>

        <!-- pre当标签使用  识别json对象中的\n\t等转义字符，展示原始的JSON对象结构 -->
        <!-- 不加pre标签 -->
        <div>{{jsonobj}}</div>

        <!-- pre当做标签 -->
        <pre>{{jsonobj}}</pre>
    </div>



    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    message: 'Hello Vue!',
                    msg: '<h2>hello world</h2>',
                    jsonobj: {
                        "key": "123",
                        "name": "旺财"
                    }
                }
            }
        }).mount('#app')




    </script>
</body>

</html>